<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"/>
    <title>Mary's 天气数据</title>
</head>
    <script>

    $(document).ready(function(){

        // 开始写 jQuery 代码...
        //给下拉框绑定改变事件
        $("#cityId").change(function(){
            alert("cityId:"+$(this).val());  //101030100
            window.location.href="http://localhost:7444/show/"+$(this).val();
        })

    });


    </script>
<body>
<h1>Mary's 天气数据</h1>
<select name="cityId" id="cityId">
    <option th:each="city:${cityList}" th:value="${city.cityId}" th:text="${city.cityName}"></option>
</select>
<hr>
<hr>
<p th:text="${weatherData.result.province}">省份</p>
<p th:text="${weatherData.result.area}">城市</p>
<div>
    <ul style="width:100%;">
        <li style="width:100px;display: inline-block;list-style: none;" th:each="weather:${weatherData.result.list}">
            <span th:text="${weather.date}"></span><br>
            <span th:text="${weather.week}"></span><br>
            <span th:text="${weather.weather}"></span><br>
            <span th:text="${weather.weatherimg}"></span><br>
            <span th:text="${weather.real}"></span>
            <!--private String date;
            private String week;
            private String weather;
            private String weatherimg;
            private String real;-->

        </li>
    </ul>
</div>

</body>
</html>